new Vue({
  el: "#app",
  data() {
    return {
      i_Title: {},
      i_MonthTotal: {},
      i_GoodsSale: [],
      i_Mobilization: {},
      i_Book: {},
    };
  },
  mounted() {
    this.getData();
    this.ready();
    this.myScroll();
  },
  methods: {
    // 获取数据
    getData() {
      var that = this;
      //  头部title
      $.ajax({
        url: "./json/title.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_Title == res.Data) {
              return;
            }
            that.i_Title = res.Data;
          }
        },
      });
      // 月统计
      $.ajax({
        url: "./json/month.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_MonthTotal == res.Data) {
              return;
            }
            that.i_MonthTotal = res.Data;
            that.monthTotal(res.Data);
          }
        },
      });

      // 销售排行
      $.ajax({
        url: "./json/goodsSale.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_GoodsSale == res.Data) {
              return;
            }
            that.i_GoodsSale = that.packageSort(res.Data);
          }
        },
      });

      // 周统计
      $.ajax({
        url: "./json/mobilization.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_Mobilization == res.Data) {
              return;
            }
            that.i_Mobilization = res.Data;
            that.week(res.Data);
          }
        },
      });

      // 订单情况
      $.ajax({
        url: "./json/book.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_Book == res.Data) {
              return;
            }
            that.i_Book  = res.Data;
            that.book(res.Data);
          }
        },
      });
    },
    // 月统计
    monthTotal(data) {
      var myChart = echarts.init(document.getElementById("chart4"));

      var colors = [
        "rgb(10, 200, 150)",
        "rgb(220, 70, 35)",
        "rgb(150, 100, 150)",
      ];

      option = {
        color: colors,

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter: function (params) {
            // 系列
            let html = params[0].name + "<br>";

            for (var i = 0; i < params.length; i++) {
              // 获取每个系列对应的颜色值
              html +=
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                params[i].color +
                ';"></span>';

              // 通过判断指定系列增加 % 符号
              if (option.series[params[i].seriesIndex].type == "line") {
                html += params[i].seriesName + ": " + params[i].value + "%<br>";
              } else {
                html += params[i].seriesName + ": " + params[i].value + "<br>";
              }
            }
            return html;
          },
        },
        grid: {
          right: "20%",
        },
        toolbox: {
          feature: {
            // dataView: {
            //   show: true,
            //   readOnly: false,
            // },
            // restore: {
            //   show: true,
            // },
            saveAsImage: {
              show: true,
            },
          },
        },
        legend: {
          textStyle: {
            color: "#000", // 文本颜色
          },
          data: ["下单量", "付款量", "平均值"],
        },
        // 缩放组件
        /*dataZoom: {
            type: 'slider'
        },*/
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              formatter: "{value} 万",
              textStyle: {
                color: "#000", //X轴文字颜色
              },
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "下单量",
            min: 0,
            max: 250,
            position: "right",
            axisLine: {
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} 万",
            },
          },
          {
            type: "value",
            name: "付款量",
            min: 0,
            max: 250,
            position: "right",
            offset: 80,
            axisLine: {
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} 万",
            },
          },
          {
            type: "value",
            name: "平均值",
            min: 0,
            max: 25,
            position: "left",
            axisLine: {
              lineStyle: {
                color: colors[2],
              },
            },
            axisLabel: {
              formatter: "{value} 万",
            },
          },
        ],
        series: [
          {
            name: "下单量",
            type: "bar",
            data: data.order,
            itemStyle: {
              normal: {
                barBorderRadius: 2,
              },
            },
          },
          {
            barGap: "-50%", // 增加偏移量使重叠显示
            name: "付款量",
            type: "bar",
            yAxisIndex: 1,
            data: data.collection,
            itemStyle: {
              normal: {
                barBorderRadius: 2,
              },
            },
          },
          {
            name: "平均值",
            type: "line",
            yAxisIndex: 2,
            data: data.average,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    //周统计
    week(goods) {
      var myChart = echarts.init(document.getElementById("chart_6"));
      var order = [
        { date: "周一" },
        { date: "周二" },
        { date: "周三" },
        { date: "周四" },
        { date: "周五" },
        { date: "周六" },
        { date: "周日" },
      ];
      var payfor = [
        { date: "周一" },
        { date: "周二" },
        { date: "周三" },
        { date: "周四" },
        { date: "周五" },
        { date: "周六" },
        { date: "周日" },
      ];
      for (var i = 0; i < goods.sale.length; i++) {
        order[i].value = goods.sale[i];
        payfor[i].value = goods.pay[i];
      }
      let data = [
        {
          name: "下单",
          list: order,
        },
        {
          name: "付款",
          list: payfor,
        },
      ];
      let dateList = [];
      let yData1 = [];
      let yData2 = [];
      data[0].list.forEach(function (item, index) {
        dateList.push(data[0].list[index].date);
        yData1.push(data[0].list[index].value);
      });
      data[1].list.forEach(function (item, index) {
        yData2.push(data[1].list[index].value);
      });

      option = {
        /*backgroundColor: 'rgb(3, 19, 52)',*/
        color: ["#2ea5c3", "#e08f68"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },

          formatter: function (params) {
            var tiplabel =
              params[0].name +
              "<br/>" +
              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
              params[0].color.colorStops[0].color +
              '"></span>' +
              params[0].seriesName +
              ":" +
              params[0].value +
              "<br/>" +
              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
              params[1].color.colorStops[0].color +
              '"></span>' +
              params[1].seriesName +
              ":" +
              params[1].value;
            return tiplabel;
          },
        },
        legend: {
          data: [data[0].name, data[1].name],
          left: "right",
          icon: "circle",
          textStyle: {
            color: "#000", //右上角文字颜色
          },
        },
        grid: {
          //top:80,
          left: 20,
          bottom: 20,
          right: 40,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: dateList,
          axisLabel: {
            tooltip: {
              show: true,
            },
            inside: false,
            textStyle: {
              fontSize: 14,
            },
            interval: 0,
            color: "rgba(0,0,0)", //下侧星期颜色
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#0C1A5B", // 最下面x轴颜色
            },
          },
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(0,0,0,0.1)", // x轴颜色
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#0C1A5B", // 最左侧y轴颜色
              },
            },
            axisLabel: {
              textStyle: {
                fontSize: 14,
              },
              formatter: function (value) {
                return value;
              },
              color: "rgba(0,0,0)", // 左侧数值颜色
            },
          },
        ],
        series: [
          {
            name: data[0].name,
            yAxisIndex: 0,
            //barMinHeight:5,
            barCategoryGap: "30%",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  color: "#00000060", //第一根珠子上面的颜色
                  fontSize: 14,
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#888",
                  },
                  {
                    offset: 1,
                    color: "#ccc",
                  },
                ]),
                opacity: 1,
                shadowBlur: 5,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            type: "bar",
            data: yData1,
          },
          {
            name: data[1].name,
            yAxisIndex: 0,
            //barMinHeight:5,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  color: "#00000060", // 第二根柱字上的文字颜色
                  fontSize: 14,
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#004444",
                  },
                  {
                    offset: 1,
                    color: "#005555",
                  },
                ]),
                opacity: 1,
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            type: "bar",
            data: yData2,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    //订单情况
    book(bk) {
      var myChart = echarts.init(document.getElementById("book"));

      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: { lineStyle: { color: "#fff" } },
        },
        legend: {
          icon: "rect",
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 10,
          data: ["受理时长", "排队时长", "订单量", "客流量"],
          right: "10px",
          top: "0px",
          textStyle: { fontSize: 12, color: "#000" },
        },
        grid: { x: 40, y: 50, x2: 45, y2: 40 },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { lineStyle: { color: "#57617B" } },
            axisLabel: { textStyle: { color: "#000" } },
            data: [
              "12月\n01号",
              "12月\n02号",
              "12月\n03号",
              "12月\n04号",
              "12月\n05号",
              "12月\n06号",
              "12月\n07号",
              "12月\n08号",
              "12月\n09号",
              "12月\n10号",
              "12月\n11号",
              "12月\n12号",
              "12月\n13号",
              "12月\n14号",
              "12月\n15号",
              "12月\n16号",
              "12月\n17号",
              "12月\n18号",
              "12月\n19号",
              "12月\n20号",
              "12月\n21号",
              "12月\n22号",
              "12月\n23号",
              "12月\n24号",
              "12月\n25号",
              "12月\n26号",
              "12月\n27号",
              "12月\n28号",
              "12月\n29号",
              "12月\n30号",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: { lineStyle: { color: "#57617B" } },
            axisLabel: {
              margin: 10,
              textStyle: { fontSize: 12 },
              textStyle: { color: "#000" },
              formatter: "{value}分",
            },
            splitLine: { lineStyle: { color: "#57617B" } },
          },
          {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: { lineStyle: { color: "#57617B" } },
            axisLabel: {
              margin: 10,
              textStyle: { fontSize: 12 },
              textStyle: { color: "#000" },
              formatter: "{value}个",
            },
            splitLine: { show: false, lineStyle: { color: "#57617B" } },
          },
        ],
        series: [
          {
            name: "受理时长",
            type: "line",
            smooth: true,
            lineStyle: { normal: { width: 2 } },
            yAxisIndex: 0,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(185,150,248,0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(185,150,248,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: { normal: { color: "#B996F8" } },
            data: bk.sltime,
          },
          {
            name: "排队时长",
            type: "line",
            smooth: true,
            lineStyle: { normal: { width: 2 } },
            yAxisIndex: 0,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(3, 194, 236, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(3, 194, 236, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: { normal: { color: "#03C2EC" } },
            data: bk.pdtime,
          },
          {
            name: "订单量",
            type: "line",
            smooth: true,
            lineStyle: { normal: { width: 2 } },
            yAxisIndex: 1,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(218, 57, 20, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(218, 57, 20, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: { normal: { color: "#DA3914" } },
            data: bk.booknum,
          },
          {
            name: "客流量",
            type: "line",
            smooth: true,
            lineStyle: { normal: { width: 2 } },
            yAxisIndex: 1,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(232, 190, 49, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(232, 190, 49, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: { normal: { color: "#E8BE31" } },
            data: bk.customer,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    ready() {
      var whei = $(window).width();
      $("html").css({ fontSize: whei / 22 });
      $(window).resize(function () {
        var whei = $(window).width();
        $("html").css({ fontSize: whei / 22 });
      });
    },
    myScroll() {
      $(".myscroll").myScroll();
    },
  },
  computed: {
    convertToTenThousand() {
      return function (amount) {
        if (amount >= 100000) {
          var tenThousand = Math.floor(amount / 10000);
          var convertedAmount = tenThousand + "万";
          return convertedAmount;
        } else {
          return parseInt(amount);
        }
      };
    },
    // 根据包裹量排序
    packageSort() {
      return function (arr) {
        const a = [];
        for (i = 0; i < arr.length - 1; i++) {
          for (j = i + 1; j < arr.length; j++) {
            if (arr[i].num > arr[j].num) {
              a[0] = { ...arr[i] };
              arr[i] = { ...arr[j] };
              arr[j] = { ...a[0] };
            }
          }
        }
        return arr;
      };
    },
  },
  directives: {},
  filters: {},
});
